@extends("layouts.main")
@section('title','课程列表')
@section('keywords','课程列表')
@section('description','课程列表')
@section("content")
    <link rel="stylesheet" type="text/css" href="assets/css/course.css">
    <link rel="stylesheet" type="text/css" href="assets/css/imgcenter.css">
    <style type="text/css">
        p{
            margin: 0px;
        }
    </style>
    <main>

        <div class="scroll-content" id="scroll-content" data-page="scroll-content">

            <!-- PAGE TOP -->
            <div class="page-top">
                <div class="page-caption">
                    <div class="page-inner">
                    </div>
                </div>
            </div>

            <!-- MAIN CONTENT -->
            <div class="main-content" style="max-width: 100%;margin:0px 250px;">

                <div style="display:flex;border-radius: 10px;background: linear-gradient(20deg, #dfe0e180, #dfe0e100)">
                    <div style="width: 40%;padding: 20px 0px 20px 20px">
                        <div><video style="width: 500px;height:400px" muted autoplay controls src="{{$courseInfo['video_url']}}"></video></div>

                    </div>
                    <div style=" width:60%;">
                        <div style="display: flex;flex-direction: column;margin: 70px 4px 0px 30px;position: relative">
                            <div style="width: 106px;position: absolute;top: 20%;right: 0">
                                <div class="course-btn"><a>课程下载</a></div>
                                <div class="course-btn"><a>课程分享</a></div>
                                <div class="course-btn"><a>课件上传</a></div>
                            </div>
                            <div class="course-detail">
                                <div class="course-detail-left">课程名称:</div>
                                <div class="course-detail-val">{{$courseInfo['name']}}</div>
                            </div>
                            <div class="course-detail2">
                                <div style="display: flex">
                                    @if(!empty($courseInfo['tags']))
                                        @foreach($courseInfo['tags'] as $item)
                                    <div class="course-detail-tag">#{{$item}}</div>
                                        @endforeach
                                    @endif
                                </div>
                            </div>
                            <div class="course-detail">
                                <div class="course-detail-left">开发者:</div>
                                <div class="course-detail-val">{{$courseInfo['author']}}</div>
                            </div>
                            <div class="course-detail">
                                <div class="course-detail-left">归属者:</div>
                                <div class="course-detail-val">{{$courseInfo['owner']}}</div>
                            </div>
                            <div class="course-detail" style="flex-direction: column">
                                <div class="course-detail-left">课程内容描述:</div>
                                <div class="course-detail-val" style="margin: 10px 0;color: #ccc;font-size: 12px;font-weight: 100">{!! $courseInfo['content'] !!}</div>
                            </div>
                            <div class="course-detail" style="flex-direction: column">
                                <div class="course-detail-left">课程训练重点:</div>
                                <div class="course-detail-val" style="margin: 10px 0;color: #ccc;font-size: 12px;font-weight: 100">{!! $courseInfo['desc'] !!}</div>
                            </div>
                        </div>
                    </div>

                </div>
                <div style="height: 50px;line-height:50px;font-weight: 600;font-size: 16px;color: #FFFFFF;margin: 2px 10px">课题其他成果展示</div>
                <div style="height: 100px;">
                    <div class="scrolllist" id="s1">
                        <a class="abtn aleft" href="#left" title="左移"></a>
                        <div class="imglist_w">
                            <ul class="imglist">
                                @if(!empty($relatedList))
                                    @foreach($relatedList as $item)
                                <li>
                                    <a href="{{route('detail',['sid'=>$item['id'],'ks'=>\App\Util\Helper::randString(26)])}}"><img src="{{$item['discover']}}"><span>{{$item['name']}}</span></a>

                                </li>
                                    @endforeach
                                @endif
                            </ul>
                            <!--imglist end-->
                        </div>
                        <a class="abtn aright" href="#right" title="右移"></a>
                    </div>
                </div>

            </div>

        </div>

    </main>
    <script src="assets/js/slider.js"></script>
    <script type="text/javascript">
        $(function() {
            //默认状态下左右滚动
            $("#s1").xslider({
                unitdisplayed: 4,
                movelength: 1,
                //unitlen: 85,
                autoscroll: 1500
            });
        })
    </script>
@endsection
